<template>
    <view class="order-list-page">
        <sp-tabs-pane v-model="params.orderStatus" :category="category" @change="handelTabsChange"></sp-tabs-pane>
        <view class="list-container">
            <view class="card" v-for="(item,index) in list" :key="index">
                <u-cell icon="map" :label="dateFormat(item.createTime)"  :border="false" @click="goOrderDetail(item)">
                    <template #value>
                        <view class="order-status">{{item.orderStatus}}</view>
                    </template>
                </u-cell>
                <u-cell :title="v.goodsName" :label="v.keyName" :border="false" v-for="(v,k) in item.orderGoodsSnapshot" :key="k" @click="goOrderDetail(item)">
                    <template #icon>
                        <up-image 
                        :show-loading="true" 
                        width="143rpx" 
                        height="143rpx"
                        radius="15rpx"
                        :src="v.cover"></up-image>
                    </template>
                    <template #value>
                        <view class="value">
                            <text>￥{{v.price}}</text>
                            <text>x{{v.quantity}}</text>
                        </view>
                    </template>
                </u-cell>
                <u-cell :border="false" :value="`共${item.orderGoodsSnapshot.reduce((prev:number,cur:any)=>{
                        return prev+cur.quantity
                    },0)}件商品，总金额￥${item.orderPrice}`" @click="goOrderDetail(item)"></u-cell>
                <u-cell :border="false">
                    <template #value>
                        <view class="active">
                            <view class="button confirm" v-if="item.orderStatus==0">去支付</view>
                            <view class="button" @click="handelCancel(item)" v-if="item.orderStatus==0">取消</view>
                            <view class="button confirm" v-if="item.orderStatus==2">确认收货</view>
                        </view>
                    </template>
                </u-cell>
            </view>
            <u-empty
                mode="list"
                v-if="list.length==0"
            ></u-empty>
        </view>
        <view class="guess-like-container">
		    <sp-guess-like v-if="!query.isNext"></sp-guess-like>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad , onShow , onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import { ref,reactive } from "vue"
import { post,get } from "@/libs/request"
import { dateFormat,nav } from "@/libs/utils"
const category = [
    {
        paneKey:null,
        title:"全部",
    },
    {
        paneKey:"待支付",
        title:"待支付",
    },
    {
        paneKey:"待发货",
        title:"待发货",
    },
    {
        paneKey:"待收货",
        title:"待收货",
    },
    {
        paneKey:"5",
        title:"退换/售后",
    },
];
const params = ref({
    orderStatus:""
});
const query = reactive({
    pageIndex:1,
    pageSize:10,
    isNext:true
})
const list = ref([])
/**
 * 点击切换
 * @param i 
 */
const handelTabsChange = (i:number)=>{
    if(params.value.orderStatus == category[i].paneKey)return;
    params.value.orderStatus = category[i].paneKey;
    reload();
}
/**
 * 获取列表
 */
const getOrderList = ()=>{
    uni.showLoading({
        title: '加载中',
        mask:true,
    });
    post("order/paginate",{
        pageIndex:query.pageIndex,
        pageSize:query.pageSize,
    },params.value).then((res)=>{
        if(res.errCode==0){
            list.value = list.value.concat(res.data);
            query.pageIndex++;
            if(res.data || list.value.length >= res.page.total){
                query.isNext = false;
            }
        }
        uni.hideToast();
    })
} 
/**
 * 点击取消订单
 */
 const handelCancel = (item)=>{
    get(`order/cancel/${item.orderId}`).then((res:any)=>{
        if(res.errCode == 0){
            uni.showToast({
                title: res.errMsg,
                icon: "success",
                duration: 2000
            });
            reload();
        }
    })
}
const goOrderDetail = (item)=>{
    nav(`/subpackage/order/pages/purchanse/detail?orderId=${item.orderId}`)
}
onLoad((opt)=>{
    params.value.orderStatus = opt?.orderStatus??null;
})
/**
 * 重载
 */
const reload = async()=>{
    list.value = [];
    query.pageIndex = 1;
    query.isNext = true;
    await getOrderList();
}
onReachBottom(() => {
    query.isNext &&  getOrderList();
})
onShow(async()=>{
    await getOrderList();
})
onPullDownRefresh(async ()=>{
    await reload();
    uni.stopPullDownRefresh();
})
</script>

<style scoped lang="less">
.order-list-page{
    height: 100vh;
    overflow: auto;
    background: #f7f7f7;
    .list-container{
        padding: 120rpx 20rpx;
        .card{
            width: 100%;
            background: #FFFFFF;
            border-radius: 15rpx;
            box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
            margin-bottom: 20rpx;
            .order-status{
                color: #ff0000;
            }
            .value{
                display: flex;
                flex-flow: column;
                align-items: flex-end;
                color: #909193;
                font-size: 26rpx;
            }
            .active{
                display: flex;
                .button{
                    margin-left:10rpx;
                    padding: 10rpx 20rpx;
                    border: 1px solid #909399;
                    border-radius: 10px;
                }
                .confirm{
                    border-color: #FF0000;
                    color: #FF0000;
                }
            }
        }
        .loadAllTip{
            text-align:center;
            padding: 0 0;
            font-size: 26rpx;
            color:#666;
        }
    }
    .guess-like-container{
        padding: 0 20rpx 90rpx;
    }
}
</style>